<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript" src="/js/vue.js"></script>
<title>Vue.js</title>
</head>
<body>
	<h1>Hello World</h1>
	<hr></hr>
	<div id="app">
		<p> {{newPrice}}</p>
		<ul>
			<li v-for="news in reversNews">
				{{news.title}}------{{news.data}}
			</li>
		</ul>
	</div>
	
	<script type="text/javascript">
		var newsList = [
			{
				title:'aaaaaaaaaaaaaaaa',
				data:'2017-12-13'
			},
			{
				title:'ccccccccccccccc',
				data:'2017-12-14'
			},
			{
				title:'bbbbbbbbbbbbbbbbbbb',
				data:'2017-12-15'
			},
			{
				title:'dddddddddddddddddd',
				data:'2017-12-16'
			}
		]
	
		var app = new Vue({
			
			el:'#app',
			data:{
				price:'100',
				newsList:newsList
			},
			computed:{
				newPrice:function(){
					return this.price = '￥'+this.price+'元'
				},
				
				reversNews:function(){
					return this.newsList.reverse();
				}
				
			}
		});
	</script>
</body>
</html>